<!--
 * @Description:新浪链式调用
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 16:59:40
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新浪链式调用</title>
		<script src="./move3.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#ull{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				margin: 0 auto;
				overflow: hidden;
			}
		#ull li{
			border-bottom:1px #999 dashed;
			padding: 4px; 
			opacity: 0;
		}
		</style>
	</head>
	<script>
		window.onload = function() {
			var oBtn= document.getElementById("btn")
			var oul = document.getElementById("ull")
			var oTxt = document.getElementById("txt1")
			oBtn.onclick=()=>{
				var oli=document.createElement('li')
				oli.innerHTML=oTxt.value
				oTxt.value=''
				if(oul.children.length>0){
					oul.insertBefore(oli,oul.children[0])
				}else{
					oul.appendChild(oli)
				}
				//运动框架
				var iHeight=oli.offsetHeight;
				oli.style.height=0;
				startmove(oli,{'height':iHeight},function(){
						startmove(oli,{opacity:100},function(){

						})
				})
			}
			

		}
	</script>
	<body>
			<textarea name="" id="txt1" cols="40" rows="4"></textarea>
			<input type="button" id="btn" value="发布">
			<ul id="ull">
			
			</ul>
	</body>
</html>
